<template>
    <div class="tabbar">
        <!-- {{$route.path}} -->
        <!-- 绘制每一个选项卡 -->
        <router-link 
            v-for="(item,index) in  list"
            :key="index"
            :to="item.path"
            :exact-active-class="item.path == $route.path ? 'sel' : ''"
        >
            <span>{{item.name}}</span>
            <img :src="item.path == $route.path ? item.iconFull : item.icon">
        </router-link>
    </div>
</template>

<script>


// 引入选项卡上需要的图片资源
import home from "../../assets/img/tabbar/home.png"
import homeFull from "../../assets/img/tabbar/homeFull.png"
import cate from "../../assets/img/tabbar/cate.png"
import cateFull from "../../assets/img/tabbar/cateFull.png"
import shop from "../../assets/img/tabbar/shop.png"
import shopFull from "../../assets/img/tabbar/shopFull.png"
import user from "../../assets/img/tabbar/user.png"
import userFull from "../../assets/img/tabbar/userFull.png"


export default {
 
    data() {
        return {
            list:[
                {name:"首页",path:"/home",icon:home,iconFull:homeFull},
                {name:"分类",path:"/cate",icon:cate,iconFull:cateFull},
                {name:"购物车",path:"/cart",icon:shop,iconFull:shopFull},
                {name:"我的",path:"/user",icon:user,iconFull:userFull}
            ]
        };
    }
};
</script>

<style scoped>
    .tabbar{
        width: 100vw;
        height: .8rem;
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        border-top: .01rem solid black;
        background: white;
    }
    .tabbar a{
        flex:1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: gray;
    }
    a span{
        font-size: .2rem;
    }
    a img{
        width:.4rem;
        height:.4rem;
    }

    .sel{
        background: #DDD;
        color:orangered !important;
    }

</style>
